//弹框中订单展示
import CommonTable from '@/components/CommonTable';
import SubTitle from '@/views/components/SubTitle';
import { Space, Button, Table, InputNumber, Image, message, Popconfirm } from 'antd';
import { useState } from 'react';
import GoodsSelectModal from '@/pages/OrderModule/common/bizcomponents/GoodsSelectModal';
import { remove } from 'lodash';
import { formatZjfImg } from '@/utils/utils'

const GoodsListTable = (props) => {

	const { scene, createType, goodsList = [], handleSaveData } = props;

	const [visible, setVisible] = useState(false);

	//选择的商品
	const [selectedRowKeys, setSelectedRowKeys] = useState([]);

	const columns = [
		{
			title: '商品图片',
			dataIndex: 'goodsImage',
			width: 120,
			render: (t, r) => <Image width={48} src={formatZjfImg(t || r.ecGoodsImage, r.storeId)} />
		},
		{
			title: '供应商',
			dataIndex: 'storeName',
			width: 120,
		},
		{
			title: '商品名称',
			dataIndex: 'goodsName',
			width: 120,
			render: (t, r) => {
				return t || r.ecGoodsName;
			}
		},
		{
			title: '商品编码',
			dataIndex: 'skuCode',
			width: 120,
			render: (t, r) => {
				return t || r.ecSkuId;
			}
		},
		{
			title: '商品单价',
			dataIndex: 'goodsPrice',
			width: 120,
			render: (t, r) => {
				const price = (t || t == 0) ? t : r.ecGoodsPrice;
				return price ? '¥' + price : price;
			}
		},
		{
			title: '申请数量',
			dataIndex: 'applyCount',
			width: 120,
			render: (t, r, i) => {
				return (
					<InputNumber controls={false} value={t} onChange={(e) => changeApplyNum(e, r, i)} precision={0} max={r.goodsSource == 'add' ? 999999 : r.goodsNum - r.refundedNum} min={0} />
				)
			}
		},
	];

	//修改申请数量
	const changeApplyNum = (val, record, index) => {
		record.applyCount = val;
		const arr = [...goodsList];
		arr[index] = record;
		handleSaveData(arr);
	}

	//删除选中的商品
	const delGoods = () => {
		if (selectedRowKeys.length > 0) {
			const arr = [...goodsList];
			remove(arr, (val) => selectedRowKeys.includes(val.skuId));
			handleSaveData(arr);
		} else {
			message.info('请选择商品！');
		}
	}

	//合计信息
	const renderSummary = (columnKey, data) => {
		const sumKeys = ['goodsNum', 'canRefundedNum', 'refundedNum', 'applyCount'];
		if (sumKeys.includes(columnKey)) {
			let totalNum;
			if (columnKey == 'canRefundedNum') {
				totalNum = data.reduce((pre, next) => { return pre + Number(next['goodsNum'] - next['refundedNum']) }, 0);
			} else {
				totalNum = data.reduce((pre, next) => { return pre + Number(next[columnKey] || 0) }, 0);
			}
			return totalNum;
		} else {
			return '';
		}
	}

	const onSelectChange = (newSelectedRowKeys) => {
		setSelectedRowKeys(newSelectedRowKeys);
	};

	const rowSelection = {
		selectedRowKeys,
		onChange: onSelectChange,
	};

	const TableProps = {
		rowKey: 'skuId',
		data: goodsList,
		columns,
		rowSelection,
		summary: (pageData) => {
			if (goodsList.length == 0) {
				return null;
			}
			return (
				<>
					<Table.Summary.Row>
						{
							[{}, ...columns].map((v, index) => {
								const text = index == 0 ? '总计' : renderSummary(v.dataIndex, pageData);
								return (
									<Table.Summary.Cell index={index} key={index}>{text}</Table.Summary.Cell>
								)
							})
						}
					</Table.Summary.Row>
				</>
			);
		}
	}

	const GoodsModalProps = {
		hiddenGoodNum: true,
		submitCallback(data) {
			//已存在的spu
			const idArr = goodsList.map(v => v.skuId);
			const arr = [...goodsList];
			for (let i in data) {
				if (!idArr.includes(data[i].skuId)) {
					//商品来源设置为添加类型
					const item = data[i];
					const objSys = item.goodsSkuMatches ? item.goodsSkuMatches[0] : {};
					const obj = {
						goodsSource: 'add',
						// ecGoodsImage:  objSys.supplierSkuImage,
						// ecGoodsName: objSys.supplierSkuName,
						// ecGoodsPrice: objSys.supplierSkuPrice,
						// ecGoodsSpec: objSys.supplierSkuSpecs,
						// ecSkuId: objSys.skuId,
						// ecSpuId: objSys.spuId,
						goodsImage: item.image,
						goodsName:item.skuName ,
						goodsNum: 0,
						goodsPrice: item.isExactMatch ? item.purchasePrice : item.retailPrice,
						goodsSpec: item.colorSpecifications,
						// orderGoodsId: item.id,
						// outStoreSku: ,
						refundedNum: 0,
						skuCode: item.skuCode,
						skuId: item.id,
						spuCode: item.supplierSpuCode,
						spuId: item.spuId,
						storeName: objSys.supplierName,
						storeId: item.supplierId,
					}
					arr.push(obj);
				}
			}
			handleSaveData(arr);
		},
		handleCancel() {
			setVisible(false);
		},
        
	}

	const extraColumns = [
		{
			title: '发货数量',
			dataIndex: 'goodsNum',
			width: 120,
			render: (t, r) => {
				if (r.goodsSource == 'add') {
					return '/';
				}
				return t;
			}
		},
		{
			title: '可退数量',
			dataIndex: 'canRefundedNum',
			width: 120,
			render: (t, r) => {
				if (r.goodsSource == 'add') {
					return '/';
				}
				return r.goodsNum - r.refundedNum;
			}
		},
		{
			title: '已退数量',
			dataIndex: 'refundedNum',
			width: 120,
			render: (t, r) => {
				if (r.goodsSource == 'add') {
					return '/';
				}
				return t;
			}
		},
	]

	if(createType == 'normal' && scene != 'unInfoClaim') {
		columns.splice(4, 0, ...extraColumns);
	}

	return (
		<>
			<SubTitle wrapStyle={{ margin: '20px 0 12px 0' }} symbol as="s2" title="售后商品信息" />
			<Space style={{ marginBottom: '12px' }}>
				<Button onClick={() => setVisible(true)}>添加商品</Button>
				<Popconfirm
					title="确认要删除选中的商品吗?"
					onConfirm={delGoods}
				>
					<Button>删除商品</Button>
				</Popconfirm>
			</Space>
			<CommonTable style={{ marginBottom: '16px' }} {...TableProps} />
			{visible && <GoodsSelectModal {...GoodsModalProps} />}
		</>
	)
}

export default GoodsListTable;